



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/atom.xml" />
<link rel="alternate" type="application/json" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/blog/css/app.css?v=0.2.5">

  

<link rel="canonical" href="https://song-ruipeng.gitee.io/blog/">



  <title>Yume Shoka = 宋胖子</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
            <a href="/blog/" class="logo" rel="start"><p class="artboard">Yume Shoka</p>
              <h1 itemprop="name headline" class="title">宋胖子</h1>
            </a>
          
          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/blog/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicit31ffoj20zk0m8naf.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipewf5l51j20zk0m8b29.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclxp31goj20zk0m8qv5.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclfb3vzhj20zk0m8wny.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicljitigmj20zk0m87fp.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giciuv0socj20zk0m8qes.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="index wrap">
    <h2 class="divider">文章列表</h2>
    <div class="segments posts">
        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" itemprop="url" title="Supense和异步组件解决首页白屏问题"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclgi503lj20zk0m8hdt.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-08-15 09:44:58">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-08-15T09:44:58+08:00">2023-08-15</time>
  </span>
</div>

    <h3><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" itemprop="url" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></h3>
    <div class="excerpt">
        使用异步组件 + Supense 的形式可以实现代码分包，减少项目线上环境的首页白屏时间。
代码分包把那些需要异步加载的组件单独形成一个 js 文件，在使用这些组件时才动态引入。
在首页加载过程中只会引入主 js 文件，从而实现减少首页白屏时间的目的。
具体的步骤:
通过 defineAsyncComponent 加载异步配合 import 函数模式待入异步组件，在 template 模块使用 Supense 控制异步组件的显示，完成异步组件生成后，打包时就会自动实现分包。
使用 TailWild, 下载后会生成一个 tailwind.config.js 文件，新建 src 加入...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" itemprop="url" title="Supense和异步组件解决首页白屏问题" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" itemprop="url" title="React面试"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicis3attqj20zk0m8k7l.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-07-25 09:31:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-25T09:31:00+08:00">2023-07-25</time>
  </span>
</div>

    <h3><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" itemprop="url" title="React面试">React面试</a></h3>
    <div class="excerpt">
        # 1. 什么是 HOC / 如何修改组件属性 props？
1.props是属性，用于父子组件通信，且props不可修改。
1.1如果对于组件的props不满意，可以使用HOC返回一个新的组件。
1.2HOC高阶组件，它是一个函数，接受组件作为参数，返回一个新的组件,是Hooks出现之前，常见的复用逻辑的手段，如react-redux的connect、router5的withoutRouter，inject等。

# 2. 在函数 / 类组件中如何使用 state？

组件内部 state、适合只在本组件内部使用...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" itemprop="url" title="React面试" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" itemprop="url" title="自测1"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclize41wj20zk0m87gk.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-07-25 09:31:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-25T09:31:00+08:00">2023-07-25</time>
  </span>
</div>

    <h3><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" itemprop="url" title="自测1">自测1</a></h3>
    <div class="excerpt">
        # vue 双向绑定原理，关键点？
1. 双向绑定就是 vue 中的 v-model，绑定后数据改变视图就会跟着改变，同样视图改变数据也会跟着变化。 (响应是数据到视图)
2.v-model 其实就是一个语法糖，是:value 和 @input 的结合，使用 v-model 可以减少大量繁琐的事件处理的代码。
# 实现垂直居中的方式？
12345678910111213141516171819202122232425262728293031323334353637&amp;lt;style&amp;gt; .parent&amp;#123; display:flex;...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" itemprop="url" title="自测1" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" itemprop="url" title="读《Vuejs设计与实现》总结"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclxp31goj20zk0m8qv5.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-07-20 20:24:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-20T20:24:00+08:00">2023-07-20</time>
  </span>
</div>

    <h3><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" itemprop="url" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></h3>
    <div class="excerpt">
        # Vue.js 设计实现分为 -&amp;gt;
1.框架设计概览、2.响应式系统、3.渲染器、4.组件化、5.编译器、6.服务端渲染、

# 1. 框架设计概览
第一章：权衡的艺术:
框架的设计，本身就是一种权衡的艺术～
# 命令式和声明式
1. 命令式：关注过程
123const div = document.querySelector(&amp;#x27;#app&amp;#x27;)//获取divdiv.innerText = &amp;#x27;hello...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" itemprop="url" title="读《Vuejs设计与实现》总结" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/07/18/%E4%B8%83.React/" itemprop="url" title="React"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclhfehz7j20zk0m8u0x.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-07-18 16:24:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-18T16:24:00+08:00">2023-07-18</time>
  </span>
</div>

    <h3><a href="/blog/2023/07/18/%E4%B8%83.React/" itemprop="url" title="React">React</a></h3>
    <div class="excerpt">
        # 七.React
# 1....
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/07/18/%E4%B8%83.React/" itemprop="url" title="React" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" itemprop="url" title="读源码理解Vnode"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclj61ylzj20zk0m8b29.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-07-03 22:05:29">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-03T22:05:29+08:00">2023-07-03</time>
  </span>
</div>

    <h3><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" itemprop="url" title="读源码理解Vnode">读源码理解Vnode</a></h3>
    <div class="excerpt">
        # 六。读源码理解 Vnode
# 1. 解析阶段
vue3分别提供了createBaseVNode和createVNode方法，createBaseVNode用于创建普通VNode，而createVNode添加了很多的判断类型。

# 2.createBaseVNode 和 createVNode 这些函数在什么时候❓执行呢？

（1）组件的template模版不能直接使用，需要借助render函数，借助在线模版导出工具Vue Template...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" itemprop="url" title="读源码理解Vnode" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/06/12/%E4%BA%94.template/" itemprop="url" title="Template"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipevo9j1jj20zk0m8e81.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-06-12 21:02:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-06-12T21:02:00+08:00">2023-06-12</time>
  </span>
</div>

    <h3><a href="/blog/2023/06/12/%E4%BA%94.template/" itemprop="url" title="Template">Template</a></h3>
    <div class="excerpt">
        # 五.Template
# 1. 解析阶段
在这个阶段，Vue会将模版字符串收集起来，解析成AST(抽象语法树)的解构。解析器会扫描模版字符串，识别出其中的HTML标签，属性，表达式等内容，然后构建成一个抽象语法树。这个过程中也会对表达式进行解析和优化,以生成更高效的渲染函数。

E.m 例子如下：
123456&amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;&amp;#123;&amp;#123; title &amp;#125;&amp;#125;&amp;lt;/h1&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/06/12/%E4%BA%94.template/" itemprop="url" title="Template" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/05/17/%E5%9B%9B.JS/" itemprop="url" title="JS"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclhnx9glj20zk0m8npd.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-05-17 16:24:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-05-17T16:24:00+08:00">2023-05-17</time>
  </span>
</div>

    <h3><a href="/blog/2023/05/17/%E5%9B%9B.JS/" itemprop="url" title="JS">JS</a></h3>
    <div class="excerpt">
        # 四.JS
# 4.1 JS 数据类型有哪些，他们的区别是什么？
# 答:
JS共八种类型:Undifined,Null,Boolean,Number,String,Object,Biglnt,Symbol

其中 Biglnt 和 Symbol 是 es6 新增的数据类型

Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/05/17/%E5%9B%9B.JS/" itemprop="url" title="JS" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/05/05/%E4%B8%89.Css/" itemprop="url" title="CSS"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclhnx9glj20zk0m8npd.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-05-05 09:21:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-05-05T09:21:00+08:00">2023-05-05</time>
  </span>
</div>

    <h3><a href="/blog/2023/05/05/%E4%B8%89.Css/" itemprop="url" title="CSS">CSS</a></h3>
    <div class="excerpt">
        # 三.CSS
# 3.1 介绍一下盒模型？
# 答:
css3有两种盒模型:标准盒模型，IE盒模型（怪异盒模型）

（1）盒模型由四部分组成：margin,padding,border,content
标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：

标准盒模型的属性范围 width 和 height 只包括 content
IE 盒模型的属性范围 width 和 height 包括了 padding，border 和 content

# 可以通过 box-sizing...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/05/05/%E4%B8%89.Css/" itemprop="url" title="CSS" class="btn">more...</a>
  </div>
</article>

        
<article class="item">
  <div class="cover">
    <a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" itemprop="url" title="Event Loop"><img data-src=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipexj2jgzj20zk0m8b09.jpg"></a>
  </div>
  <div class="info">
    
<div class="meta">
  <span class="item" title="创建时间：2023-04-21 09:21:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <time itemprop="dateCreated datePublished" datetime="2023-04-21T09:21:00+08:00">2023-04-21</time>
  </span>
</div>

    <h3><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" itemprop="url" title="Event Loop">Event Loop</a></h3>
    <div class="excerpt">
        # 二.Event Loop
# 答:
1.浏览器是多线程的，浏览器每一个tab标签都代表一个独立的进程，其中浏览器渲染进程属于多线程中的一种。而事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
2.其中任务进入执行栈的时候，所有任务可以分为同步任务和异步任务。
2.1同步任务顾名思义就是立即执行的任务，同步任务一般会直接进入到主线程中执行。
2.2异步任务判断相应任务是宏任务还是微任务(注.1)，若为宏任务放入宏任务队列中，微任务放入微任务队列。当主线程被清空后，则去检查任务队列，将事先传递的回调函数包装成任务，入主线程执行。先执行微任务队列中的任务，然后执行宏任务队列中的任务。

#...
    </div>
    <div class="meta footer">
      <span>
        <a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="url" title="我的日志"><i class="ic i-flag"></i>我的日志</a>
      </span>
    </div>
    <a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" itemprop="url" title="Event Loop" class="btn">more...</a>
  </div>
</article>

    </div>

  </div>

  
  <nav class="pagination">
    <div class="inner">
    <span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><a class="extend next" rel="next" href="/blog/page/2/"><i class="ic i-angle-right" aria-label="下一页"></i></a>
    </div>
  </nav>



        </div>
        <div id="sidebar">
          
<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
      </div>
      <div class="related panel pjax" data-title="系列文章">
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="宋胖子"
      data-src="/blog/images/avatar.jpg">
  <p class="name" itemprop="name">宋胖子</p>
  <div class="description" itemprop="description">欢迎大家一起交流</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/blog/archives/">
        <span class="count">13</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/blog/page/2/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>

        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" title="React面试">React面试</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">计算机网络基础总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" title="HTTP总结">HTTP总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" title="Event Loop">Event Loop</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" title="自测1">自测1</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/06/12/%E4%BA%94.template/" title="Template">Template</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" title="vue总结">vue总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">CSS</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">宋胖子 @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/blog/js/app.js?v=0.2.5"></script>




</body>
</html>
